<template>
  <div class="commodity" >
<!--      <mochi-box class="mochiClass"  shiba="sesame" mood="monaka" blush left-eye="open" right-eye="open" left-ear="flat" right-ear="flat">-->
<!--&lt;!&ndash;视频&ndash;&gt;-->
<!--      <div  v-show="rabbitShow">-->
<!--        <video-->
<!--            class="video_show"-->
<!--                :autoplay= "true"-->
<!--                :loop = "true"-->
<!--                controls-->
<!--                :src="video">-->
<!--        </video>-->
<!--      </div>-->
<!--      <div v-show="rabbitSleepShow" >-->
<!--          <img src="https://ytc-testoss.oss-cn-shenzhen.aliyuncs.com/rabbit/rabbitSleep.jpg" style="width: 300px;height: 300px"/>-->
<!--      </div>-->
<!--&lt;!&ndash;      <a>点击按钮喂到10个水分子即可</a>&ndash;&gt;-->
<!--      <el-button @click="rabbitDrink" align="center">-->
<!--          喝水-->
<!--      </el-button>-->
<!--      <a>{{water}}个水分子</a>-->
<!--      <el-button @click="rabbitSleep">-->
<!--          前往睡觉-->
<!--      </el-button>-->
<!--      </mochi-box>-->

          <el-carousel indicator-position="outside" style="width: 50%;height: 800px" >
              <el-carousel-item v-for="item in imgList" :key="item" style="width: auto;height: auto" >
                  <img :src="item" alt style="width: 100%;height: 100%;"   />
              </el-carousel-item>
          </el-carousel>

  </div>


</template>

<script>
import MochiBox from "@/components/Mochi/MochiBox";
export default {
    name: "",
    components: {MochiBox},
    data(){
    return{
        video:'https://ytc-testoss.oss-cn-shenzhen.aliyuncs.com/rabbit/drink.mp4',
        rabbitShow:false,
        rabbitSleepShow:true,
        water:1,
        pageNum:1,
        pageSize:8,
        total:0,
        QueryForm:{
            search:''
        },
        commodityList:[],
        woList:[],
        imgList:['https://ytc-testoss.oss-cn-shenzhen.aliyuncs.com/daily/%E5%85%94%E5%AD%901.jpg',
            'https://ytc-testoss.oss-cn-shenzhen.aliyuncs.com/daily/%E5%85%94%E5%AD%902.jpg',
        'https://ytc-testoss.oss-cn-shenzhen.aliyuncs.com/daily/%E5%85%94%E5%AD%903.jpg',
        'https://ytc-testoss.oss-cn-shenzhen.aliyuncs.com/daily/%E5%85%94%E5%AD%904.jpg',
        'https://ytc-testoss.oss-cn-shenzhen.aliyuncs.com/daily/%E5%85%94%E5%AD%905.jpg']
    }
  },
  methods:{
        rabbitDrink(){
            this.rabbitShow=true,
                this.rabbitSleepShow=false,
            this.water+=1
            if(this.water>=10){
                this.rabbitShow=false,
                    this.rabbitSleepShow=true,
                this.water = 1
            }
        },
        rabbitSleep(){
                this.rabbitShow=false,
                this.rabbitSleepShow=true,
                this.water = 1;
        },
    QueryCustomer() {
      this.customerList = []
      this.$http.get('/customer', {params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          search: this.QueryForm.search
        }
      }).then(res => {
        this.woList = res.data.data.list
        this.total=res.data.data.total
        this.pageNum=res.data.data.pageNum
        this.pageSize=res.data.data.pageSize
        console.log(res.data.data.list)
      })
    },
    QueryAllr(){
      this.$http.get('/customer',null).then(res=>{
        this.woList=res.data.data
        console.log(res.data.data)
      })
    },
    handleSizeChange(pageSize){
          this.pageSize=pageSize
      this.getAllCommodityList(this.$route.params.petType)
    },handleCurrentChange(pageNum){
        this.pageNum=pageNum
      this.getAllCommodityList(this.$route.params.petType)
    }
  },
  //ytc:页面加载就调用
  created() {
    // this.getAllCommodityList(this.$route.params.petType);
  // this.QueryCustomer();
  },

  //监听是否为cat或者dog
  watch:{
    $route(to,from){
      if(to.params.petType==='rabbit'){
        this.getAllCommodityList('rabbit');
      }else{
        this.getAllCommodityList('dog');
      }
    }
  }
}
</script>

<style scoped>
  @import url("Commodity.css");
  .el-carousel__item h3 {
      display: flex;
      color: #475669;
      opacity: 0.75;
      line-height: 300px;
      margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
      background-color: #d3dce6;
  }
</style>